<template>
    <el-card shadow="always">
        <div class="navContainer">
            <div class="userinfo">
                <!-- 上 -->
                <div class="username">
                    <span>{{Roomstore.planName}}</span>
                    <div @click="toMyroom">返回</div>
                </div>
                <!-- 下 -->
                <div class="usertime">
                    <img :src="Roomstore.cover" alt="">
                    <span>1775131_aEaL</span>
                    <div>创建于2022-09-08</div>

                </div>
            </div>
        </div>
    </el-card>
    <el-card shadow="always" style="margin-top:10px ">
        <div class="imgContainer" style="width: 960;height:600px;" v-if="Roomstore.roomItemdata.length==0">
            <div class="imgView">
                <img src="../../../assets/2.png">
                <span>无更多数据</span>
            </div>
            
        </div>
        <!-- 有课程的话 -->
        <div class="loadMoreList" v-else>
            <div class="loadMoreItem" v-for="(item,index) in Roomstore.roomItemdata">
                <div class="left">
                    <img :src="item.cover" alt="">
                </div>
                <div class="center">
                    <span>{{item.contentName}}</span>
                    <div>未开始</div>
                </div>
                <div class="rigth">
                    <button ><a href="https://www.dance365.com/detail/planUserUpload?momentId=034c4e2ae0784d74a0c5f4a2542248a8&source=training&trainingto=ff80808182ed75b201831bcd779421a7&planId=ff80808182ed75b201831bcd778b21a">开始练习</a></button>
                </div>
            </div>

        </div>
    </el-card>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import useRoomstore from '../../../stores/room'
import router from '../../../router/index'
const Roomstore = useRoomstore()
// 返回按钮
const toMyroom = () => {
    router.push({
        path: '/room/myroom'
    })
}

// // 跳转接口
// const Deodetail=ref('')

// // 点击跳转练习详情按钮
// const toviDeodetail=(contentId:any)=>{
//      const a = contentId
//     const b =Roomstore.planId
//     console.log(a,b);
    
//      Deodetail.value=`https://www.dance365.com/detail/planUserUpload?momentId=${a}&source=training&trainingto=ff80808182ed732d01831bd596284405&planId=${b}`
// }



</script>

<style scoped>
.navContainer {
    width: 1020px;
    height: 90px;
    padding: 30px;
}

.navContainer .userinfo {
    display: flex;
    flex-direction: column;
}

.navContainer .userinfo .username {
    width: 960px;
    height: 28px;
    display: flex;
}

.navContainer .userinfo .username span {
    font-size: 24px;

}

.navContainer .userinfo .username div {
    font-size: 12;
    color: #7d8090;
    margin-left: 800px;
}

.navContainer .userinfo .usertime {
    margin-top: 24px;
    display: flex;
}

.navContainer .userinfo .usertime div {
    margin-left: 10px;
    color: #7d8090;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
}

.navContainer .userinfo .usertime span {
    height: 28px;
    line-height: 28px;
}

.navContainer .userinfo .usertime img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 10px;
}

.imgContainer .imgView {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 220px;
}

.imgContainer .imgView img {
    display: block;
    margin: auto;
    width: 225px;
    height: 225px;
}

.imgContainer .imgView span {
    margin-top: 20px;
    color: #B1B5C1;
}

/*数据列表样式*/
.loadMoreList {

    margin: 0 20px
}

.loadMoreList .loadMoreItem {
    width: 960px;
    height: 102px;
    display: flex;
    padding: 20px 0;
    border-bottom: .5px solid #90919b;
}

.loadMoreList .loadMoreItem .left {}

.loadMoreList .loadMoreItem .left img {
    width: 169px;
    height: 101px;
    border-radius: 5px;
    margin-right: 20px;
}

.loadMoreList .loadMoreItem .center {
    width: 150px;
    height: 100px;
}

.loadMoreList .loadMoreItem .center span {
    width: 100px;
    height: 18px;
    font-weight: 700;
    font-size: 15px;
}

.loadMoreList .loadMoreItem .center div {
    margin-top: 25px;
    font-size: 15px;
    color: #7d8090;
}

.loadMoreList .loadMoreItem .rigth {
    margin-left: 500px;
    margin-top: 20px;
    font-size: 15px;
    color: #7d8090;
}

.loadMoreList .loadMoreItem .rigth button {
    width: 96px;
    height: 40px;
    border: none;
    color: #fff;
    border-radius: 5px;
  background-color: #fff;
}
.loadMoreList .loadMoreItem .rigth button a{
    text-decoration: none;
    color: #fff;
}
.loadMoreList .loadMoreItem:hover button{
    width: 96px;
    height: 40px;
    border: none;
    color: #fff;
    border-radius: 5px;
    background-color: hotpink;
 
}
</style>